<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="canvas" width="600" height="600"  style="border: 1px solid blue;"></canvas>
    </div>
    <script>
        var canvas=document.querySelector('#canvas')
        var ctx=canvas.getContext('2d')
        var r= 200 
        var img=new Image()
        img.src='./kkk.png'
        function drawTimer(){
            ctx.clearRect(0,0,canvas.width,canvas.clientHeight)
            ctx.drawImage(img,0,0,600,600)
            ctx.save()
            ctx.translate(canvas.width/2,canvas.height/2)
            ctx.textAlign='center'
            ctx.textBaseline='middle'
            ctx.font='30px 楷体'
            for(var i=1;i<=12;i++){
                var angel= (i-3) * Math.PI * 2/ 12
                var x= Math.cos(angel) * r 
                var y=Math.sin(angel) * r
                ctx.fillText(i,x,y) 

            }
            var date=new Date()
            var hours=date.getHours()
            hours=hours > 12 ?hours-12:hours
            var minutes=date.getMinutes()
            var seconds=date.getSeconds()
            console.log(hours,minutes,seconds)
            var hourTotal=hours+ minutes/60 
            var minutesTotal=minutes + seconds/60 

            
            // 时针
            ctx.save() 
            ctx.beginPath()
            ctx.rotate(Math.PI * 2 / 12 * (hourTotal - 3))
            ctx.moveTo(-15,-5)
            ctx.lineTo(-15,5)
            ctx.lineTo(r * 0.6,1)
            ctx.lineTo(r * 0.6,-1)
            ctx.closePath()
            ctx.fillStyle='bisque'
            ctx.fill()
            ctx.restore()

            // 分针
            ctx.save() 
            ctx.beginPath()
            ctx.rotate(Math.PI * 2 / 60 * (minutesTotal - 15))
            ctx.moveTo(-15,-4)
            ctx.lineTo(-15,4)
            ctx.lineTo(r * 0.7,1)
            ctx.lineTo(r * 0.7,-1)
            ctx.closePath()
            ctx.fillStyle='blueviolet'
            ctx.fill()
            ctx.restore()

            // 秒针
            ctx.save() 
            ctx.beginPath()
            ctx.rotate(Math.PI * 2 / 60 * (seconds - 15))
            ctx.moveTo(-15,-3)
            ctx.lineTo(-15,3)
            ctx.lineTo(r * 0.9,1)
            ctx.lineTo(r * 0.9,-1)
            ctx.closePath()
            ctx.fillStyle='red'
            ctx.fill()
            ctx.restore()

            ctx.restore()
        }
        setInterval(drawTimer,500)
    </script>
</body>
</html>